<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'requestPayment'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-view>支付金额</onekit-view>
			<onekit-view onekit-class="price">0.01</onekit-view>
			<onekit-view onekit-class="desc">实际接口应用中可自定义金额</onekit-view>
			<onekit-view onekit-class="btn-area">
				<onekit-button type="primary" :loading="loading" @Tap="requestPayment">支付</onekit-button>
			</onekit-view>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "发起支付",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
const app = getApp();
export default Page(ONEKIT_JSON,["loading"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'发起支付',
        "path":'packageAPI/pages/request-payment/request-payment'
};
    },
    "onLoad"(){
    },
    "requestPayment"(){
      const self = this;
      self.setData({
        "loading":true
});
      app.getUserOpenId(function(err,openid){
      if(!err)
      {
        wx.cloud.callFunction({
            "name":'pay',
            "data":{
                "action":'unifiedorder',
                "userInfo":{
                    "openId":openid
},
                "price":0.01
},
            "success":(res)=>{
              console.warn('[云函数] [openapi] templateMessage.send 调用成功：',res);
              const data = res.result.data;
              wx.requestPayment({
                  "timeStamp":data.time_stamp,
                  "nonceStr":data.nonce_str,
                  "package":`prepay_id=${data.prepay_id}`,
                  "signType":'MD5',
                  "paySign":data.sign,
                  "success":()=>{wx.showToast({
                      "title":'支付成功'
})}
});
            },
            "fail":(err)=>{
              wx.showToast({
                  "icon":'none',
                  "title":'支付失败'
});
              console.error('[云函数] [openapi] templateMessage.send 调用失败：',err);
            }
});
      }
else
      {
        console.log('err:',err);
        self.setData({
            "loading":false
});
      };
    });
    }
});

</script>
<style 
 lang="css">
.page-section {
  width: auto ;
  margin: 15px ;
  padding: 62px 15px ;
  background-color: var(--weui-BG-2) ;
  text-align: center ;
  font-size: 14px ;
}
.desc {
  color: var(--weui-FG-1) ;
}
.price {
  margin-top: 15px ;
  margin-bottom: 13px ;
  position: relative ;
  display: inline-block ;
  font-size: 39px ;
  line-height: 1 ;
}
.price:before {
  content: "¥" ;
  position: absolute ;
  font-size: 20px ;
  top: 4px ;
  left: -20px ;
}
</style>